<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="../js/jquery-3.1.1.js"></script>  
  <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  
  <style>
    th,td{
      text-align: center;
    }
    #mydiv>div{
      float: left;
      height: 20px;
      width: 20px;
      cursor: pointer;
    }
    .clear:after {
 content: "";
 display: block;
clear: both;}
h2{
  margin: 50px;
}
.inp{
  width: 230px;
  height: 26px;
}
body>:nth-child(2),body>:nth-child(3){
  margin-bottom: 30px;
}
thead{
  background-color: #F2F2F2;
}
th{
  height: 30px;
  margin: 10px 0;
}
td{
  padding: 10px 0;
}
#tiaozhuan input{
  width: 40px;
  margin: 0 5px;
  outline:none;
  border: 1px solid #6554C0;
  border-radius: 6px;
}
#tiaozhuan{
  color: #A8AFBC;
}
.ziti{
  color: #A8AFBC;
}
#mydiv>div{
  border: 1px solid #A8AFBC;
  width: 30px;
  margin: 5px 4px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  color: #A8AFBC;
  outline:none;
  font-weight: 900;
  border-radius: 6px;
}
#mydiv>div:hover{
  border: 1px solid #6554C0;
  color:#6554C0 ;
  font-weight: 900;
}
#shanchu{
  border: none;color: #FFC5C5;background-color: white;
  outline:none;
}
#chongzhi{
background-color:#61A4E4 ;
width: 75px;
  height: 26px;
  border-radius: 6px;
  border: none;
  color: white;
  font-size: 16px;
  outline:none;
}
#chaxun{
  background-color: #64C8BC;
  width: 75px;
  height: 26px;
  border-radius: 6px;
  border: none;
  color: white;
  font-size: 16px;
  outline:none;
}
#xinzeng{
  background-color: #FEA858;
  width: 75px;
  height: 26px;
  border-radius: 6px;
padding: 0;
border: none;
font-size: 16px;
outline:none;

}
.shanchu{
  border: none;color: #FFC5C5;background-color: #FEF3F3;  
  width: 40px;
  height: 30px;
  border-radius: 6px;
  outline:none;
}
.chakan{
  width: 40px;
  height: 30px;
  border: none;color: #FEA858;background-color: #FEF2E6; 
  border-radius: 6px;
  outline:none;
  padding: 0;
}
.chakan:hover{
  color: #FEA858;background-color: #FEF2E6; 
}
.div2>div{
  margin: 5px;
}
.div2>div select{
  height: 26px;
}
#div4{
  padding: 0;
  height: 26px;
}
#div4>button{
  margin-left: 5px;
  padding:2px 2px;
  border-radius: 6px;

  border: none;
  height: 26px;
}
  </style>
</head>
<body>
  <h2 class="container">装备管理</h2>
  <div class="container">
    <span class="col-md-1 item">装备信息</span>
    <div class="col-md-3 item">
  <input type="text" class="inp" onfocus="this.placeholder=''" onblur="this.placeholder='输入装备名称/编号/责任人'" placeholder='输入装备名称/编号/责任人' id="input_1">
    </div>

    <span class="col-md-1 item">使用单位 </span>
  <div class="col-md-3 item">
  <input type="text"  class="inp" onfocus="this.placeholder=''" onblur="this.placeholder='请输入使用单位'" placeholder='请输入使用单位' id="input_2">
  </div>
 <div class="col-md-3 item col-md-offset-1 btn_box">
  <button id="chongzhi"><span class="glyphicon glyphicon-repeat" aria-hidden="true">重置</span></button>
  <button id="chaxun"><span class="glyphicon glyphicon-ok-circle" aria-hidden="true">查询</span></button>
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="xinzeng">
    <span class="glyphicon glyphicon-plus" aria-hidden="true">新增</span>
  </button>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">新增装备</h4>
        </div>
        <div class="modal-body div2">
          <div class=" container-fluid">
             <span class="col-md-2 item">装备编号</span> <input type="text" class="col-md-4 item " id="xz1">
          <span class="col-md-2 item">装备分类</span>  <select name=""   class="col-md-4 item " id="xz2">
            <option value="全部">全部</option>
            <option value="装甲车">装甲车</option>
            <option value="后勤保障车">后勤保障车</option>
            <option value="通讯车">通讯车</option>
          </select>
          </div>
         
          <div class=" container-fluid">
            <span class="col-md-2 item">装备名称</span> <input type="text" class="col-md-4 item " id="xz3">
          <span class="col-md-2 item">投运日期</span ></input><input type="date" class="col-md-4 item " id="xz4">
          </div>
          <div class=" container-fluid">
            <span class="col-md-2 item">装备编号</span>
            <div class="col-md-4 item" id="div4">
              <button id="zc"><span class="glyphicon glyphicon-stop" aria-hidden="true" style="color:#64C8BC ;">正常</span></span></button>
              <button id="wx"><span class="glyphicon glyphicon-stop" aria-hidden="true" style="color:#FFC5C5;">维修中</span></button>
              <button id="ty"><span class="glyphicon glyphicon-stop" aria-hidden="true" style="color:#BCBCBC ;">停用</span></button>
          </div>
           <span class="col-md-2 item">价格</span> <input type="text" class="col-md-4 item " id="xz5">
        </div>
          <div class=" container-fluid">
            <span class="col-md-2 item">筹措方式</span>  <select name="" class="col-md-4 item " id="xz6">
              <option value="全部">全部</option>
              <option value="分配">分配</option>
              <option value="自购">自购</option></select>
            <span class="col-md-2 item">使用单位</span> <input type="text" class="col-md-4 item "id="xz7">
            
          </div>
         <div class=" container-fluid">
         <span class="col-md-2 item">存放位置</span> <input type="text" class="col-md-4 item " id="xz8">
         <span class="col-md-2 item">责任人</span> <input type="text" class="col-md-4 item " id="xz9">
         </div>
    
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="queren">确认</button>
        </div>
      </div>
    </div>
  </div>
 </div>
  </div>

  <div class="container">
    <span class="col-md-1 item">装备分类</span>
    <div class="col-md-3 item">
      <select name="" id="fenlei"  class="inp">
      <option value="全部">全部</option>
      <option value="装甲车">装甲车</option>
      <option value="后勤保障车">后勤保障车</option>
      <option value="通讯车">通讯车</option>
    </select>
    </div>
    <span class="col-md-1 item">筹措方式</span>
  <div class="col-md-3 item">
   <select name="" id="way"  class="inp">
      <option value="全部">全部</option>
      <option value="分配">分配</option>
      <option value="自购">自购</option>
    </select>
  </div> 
  <span class="col-md-1 item">装备状态</span>
 <div class="col-md-3 item" >
     <select name="" id="state" class="inp">
      <option value="全部">全部</option>
      <option value="正常">正常</option>
      <option value="维修中">维修中</option>
      <option value="停用">停用</option>
    </select>
 </div> 
  </div>

<table class="container">
  <thead class="container-fluid">
    <tr >
      <th class="col-md-1 item">选项</th>
      <th class="col-md-1 item">装备编号</th>
      <th class="col-md-1 item">装备名称</th>
      <th class="col-md-1 item">装备分类</th>
      <th class="col-md-1 item">装备状态</th>
      <th class="col-md-1 item">价格</th>
      <th class="col-md-1 item">筹措方式</th>
      <th class="col-md-1 item">使用单位</th>
      <th class="col-md-1 item">存放位置</th>
      <th class="col-md-1 item">责任人</th>
      <th class="col-md-2 item">操作</th>
    </tr>
    <tbody id="tbody" class="container-fluid">

    </tbody>
    
  </thead>

</table>



<div class="container">
  <div class="col-md-1 item">
    <button id="shanchu"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>
  </div>
  <div id="mydiv" class="clear col-md-4 item item col-md-offset-5">

  </div>
  <div class="clear col-md-2 item" id="tiaozhuan">
    转至<input type="" placeholder="1" onfocus="this.placeholder=''" onblur="this.placeholder='1'" >页
    <button style="border: none;color: #6554C0;background-color: white;outline:none;">跳转</button>
  </div>

</div>

<script src="../js/zhuangbeiguanli.js"></script>
</body>
</html>